    <script setup>
    /**
     * @name 不使用baseModel的视频预览弹窗
     */
    import { onMounted, ref, watch } from 'vue'

    const viewVisible = ref(false) // 控制弹窗显示
    const videoUrl = ref('') // 视频地址
    const videoRef = ref() // 视频元素

    const open = (url) => {
        if (url) {
            videoUrl.value = url
            viewVisible.value = true
            nextTick(() => {
                videoRef.value && (videoRef.value.currentTime = 0)
                videoRef.value && videoRef.value.play()
            })
        }
    }
    const close = () => {
            viewVisible.value = false
    }

        // 关闭 暂停视频播放
    watch(() => viewVisible.value, (nv, ov) => {
    if (!nv) {
        videoRef.value && videoRef.value.pause()
    }
    })

    defineExpose({ open, close })
    </script>
    
    <template>
        <a-modal :style="{ border: 'none'}" v-model:visible="viewVisible"
        :maskClosable="true" :width="800"
        :zIndex="1000"  :centered="false"
        :closable="true" :keyboard="false">
        <template #title>
            <slot name="title">
                <span>查看视频</span>
            </slot>
        </template>

        <div class="view_content">
            <video :src="videoUrl" controls autoplay ref="videoRef" class="is_video">
            </video>
        </div>

        <template #footer>
            <a-button type="primary" @click="viewVisible = false">关闭</a-button>
        </template>
        </a-modal>
    </template>
    
    <style lang="less" scoped>
    // 视频预览弹窗样式
    .view_content{
    width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        background: #000000;

        video {
            height: 100%;
            width: 100%;
            background: rgb(223, 223, 223);
        }
    }
    </style>
    
